<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in ticketInfo.slider_image" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-block display-flex-column" style="">
			<view class="row-center notice" style="" @click="noticeShow=true">
				<icon type="info" size="16" color="#fd818d" style="margin-left: 15px;margin-right: 3px;" />
				<text style="color: #fd818d;">注意须知</text>
				<text class="iconfont iconxiayiyeqianjinchakangengduo " style="color: #fd818d; margin-left: auto;margin-right: 10px;"></text>

			</view>
			<view class="row-center " style="height: 40px;">
				<text style="font-size: 18px;font-weight: 600;margin-left: 12px;">{{ticketInfo.ticket_name}}</text>
				<view class="grade"><text>{{ticketInfo.grade}}A</text></view>
			</view>
			<view class="row-center " style="height: 30x;margin: 7px 0;">
				<text style="margin-left: 12px;color: #000;">{{ticketInfo.tips}}</text>
			</view>
			<view class="line" style="margin: 0 12px;"></view>
			<view class="row-center " style="height: 30x;margin: 7px 0;">
				<text style="margin-left: 12px;color: #000;">{{ticketInfo.scenic_address_name}}</text>
				<view @click="goScenicArea(ticketInfo.scenic_address_lat_and_lng,ticketInfo.scenic_address_name)" class="display-flex-column" style="margin-left: auto;margin-right: 10px;lign-items: center;">
					<text class="iconfont iconzhinanzhidao " style="color: #2c63ff;text-align: center;"></text>
					<view class="" style="color: #007AFF;font-size: 14px;">
						<text>地图</text>
						<text>·周边</text>
					</view>
				</view>

			</view>
		</view>

		<view class="ticket-block display-flex-column" style="">

			<view class="row-center " style="height: 40px;">
				<text style="font-size: 18px;font-weight: 600;margin-left: 12px;">门票</text>
			</view>

			<view class="line" style="margin: 0 12px;"></view>
			<view style="" v-for="(item,index) in ticketInfo.items" :key="index">
				<view class="display-flex-column">
					<view class="" style="width: 60%;margin: 5px 12px;color: #000;">
						{{item.name}}
					</view>

				</view>
				<view class="row" style="margin-left: 12px;">
					<view class="column">
						<view style="color: #007AFF;">{{item.can_buy}}</view>
						<view style="margin: 2px 0;">
							<text style="color: #fd8457;margin-right: 8px;">{{item.condition_refund}}</text>
							<text style="color: #6b6c6c;">{{item.take_ticket}}</text>
						</view>
						<view style="margin: 2px 0 5px 0;" @click="goNotice">
							<text style="color: #a9aaa6;margin-right: 8px;">已售{{item.sales}}+</text>
							<text style="color: #a9aaa6">购买须知</text>
							<text class="iconfont iconxiayiyeqianjinchakangengduo " style="color: #a9aaa6"></text>
						</view>
						<view style="margin: 2px 0 15px 0;" >
							<text v-if="item.is_full_reduction" style="color: #8a8b89;margin-right: 8px;">
								满
								<text style="color: #fc1f13;font-size: 15px;font-weight: 600;">{{item.full_refuction_price}}</text>
								减<text style="color: #fc1f13;font-size: 17px;font-weight: 600;">{{item.sub_price}}</text>
								</text>
						</view> 
					</view>
					<view @click="goOrderWrite(item.id)" class="column" style="margin-left: auto;margin-right: 12px;align-items: flex-end;">
						<view style="color: #fd5f33;"><text>￥</text><text style="font-size: 22px;">{{item.price}}</text></view>
						<view style="height: 25px;line-height: 25px; width: 60px; background-image: linear-gradient(to right,#fd860c, #fd5f33);;border-radius: 4px 4px 4px 4px;color: #FFFFFF;text-align: center;"><text>预定</text></view>
					</view>
				</view>
				<view class="line"></view>
			</view>


		</view>

		<u-popup mode="center" v-model="noticeShow" :safe-area-inset-bottom="true" border-radius="20" height="600" width="70%"
		 :closeable="true">
			<view class="content column" style="background: #f7f7f7;height: 100%;">
				<view>景区公告</view>
				<rich-text :nodes="ticketInfo.noticeStr"></rich-text>

			</view>
		</u-popup>
		<w-loading text="加载中.." mask="true" click="true" ref="loading"></w-loading>

	</view>
</template>

<script>
	// import share from '@/components/share';
	export default {
		components: {
			// share
		},
		data() {
			return {
				productId: '',
				noticeShow: false,
				noticeStr: '',
				ticketInfo: {}
			};
		},
		onLoad(options) {
			this.productId = options.product_id
		},
		onReady() {
			this.init()

		},
		methods: {

			init: function() {
				let that = this
				that.$refs.loading.open()
				that.$u.api.getScenicTicketDetail({
					product_id: that.productId
				}).then(res => {
					that.$refs.loading.close()
					that.ticketInfo = res.data
					console.log(res)

				})
			},
			goNotice:function(){
				uni.navigateTo({
					url: '/pages/web/web?url='+this.ticketInfo.buy_notice
				})
			},
			goOrderWrite: function(id) {
				uni.navigateTo({
					url: '/pages/scenic/order_write?product_id='+this.productId+'&item_id='+id
				})
			},
			goScenicArea: function(res,name) {
	
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude:  parseFloat(res.split(",")[1]),
					longitude: parseFloat(res.split(",")[0]),
					name: name,
				});
				
				console.log(777,res,name)
			}
		},


	}
</script>

<style lang='scss'>
	page {
		background: #f8f8f8;
		padding-bottom: 160upx;
	}



	.carousel {
		height: 400upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 400upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.introduce-block {
		/* height: 260px; */
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		position: relative;
		margin-top: -15px;
		background-color: #FFFFFF;
	}

	.notice {
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-color: #fec3ba;
		height: 30px;
	}

	.grade {
		background-color: rgb(186, 213, 243);
		border-radius: 10px 10px 10px 10px;
		width: 25px;
		text-align: center;
		font-size: 10px;
		margin-left: 10px;
	}

	.ticket-block {

		margin-top: 10px;
		background-color: #FFFFFF;
	}

	.content {
		padding: 24rpx;
		text-align: center;
	}
</style>
